<template>
  <div>

    <div v-show="visible">
      <div>
        <div class="productOrder-container" v-show="showTable">
          <!--  relicMapSearch 商品信息展示的第一部分 -->
          <div class="">
            <div class="">
              <el-form :inline="true" class="demo-form-inline" size="mini" :model="cForm">
                <el-form-item>
                  <el-input size="mini" v-model="inputguanone" placeholder="商品名称" class="input" />
                </el-form-item>
                <!-- ------------ -->
                <el-form-item>
                  <el-select clearable placeholder="展示区域" v-model="commoditytype" @change="handler2($event)"
                    class="select">
                    <el-option :label="c2.name" :value="c2.id" v-for="c2 in list3" :key="c2.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-select clearable placeholder="供应商" v-model="gongying" @change="handler1($event)" class="select">
                    <el-option :label="c2.supplierName" :value="c2.id" v-for="c2 in list1" :key="c2.id"></el-option>
                  </el-select>
                </el-form-item>
                <!-- -------- -->
                <!-- <el-form-item>
                  <el-select clearable placeholder="商品分类" v-model="category" @change="handler3($event)" class="select">
                    <el-option :label="c3.name" :value="c3.id" v-for="c3 in list3" :key="c3.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-select clearable placeholder="商品属性" v-model="property" @change="handler4($event)" class="select">
                    <el-option :label="c3.title" :value="c3.id" v-for="c3 in list4" :key="c3.id"></el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item>
                  <el-select clearable placeholder="审核" v-model="cForm.status" @change="handler5($event)"
                    class="select">
                    <el-option :label="c3.title" :value="c3.id" v-for="c3 in list5" :key="c3.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <!-- <el-checkbox v-model="checked">已售罄</el-checkbox> -->
                  <el-checkbox v-model="checked" size="mi·ni" class="shou" @change="selling">已售罄</el-checkbox>
                </el-form-item>
                <el-form-item>
                  <el-button class="same" size="mini" @click="query">查询</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button class="el-icon-plus same" size="mini" @click="showdiag">添加</el-button>
                </el-form-item>
                <el-form-item>
                  <download-excel class="blueBtn" :data="records" :fields="json_fields" worksheet="My Worksheet"
                    name="商品信息列表">
                    导出
                  </download-excel>
                </el-form-item>
              </el-form>
            </div>
            <!-- <div class="right-select"> -->
            <!-- </div> -->
          </div>

          <!-- 商品信息展示的第二部分 -->
          <!-- <el-table
            style="width: 100%"
            border
            :data="
              
            "
          > -->

          <el-table :data="records.slice(
            (currentPage - 1) * pageSize,
            currentPage * pageSize
                      )" border size="small" stripestyle="width: 100%" :header-cell-style="{
              color: '#fff',
              background: '#6090EC',
              fontSize: '11px',
              fontWeight: 'normal',
            }">

            <el-table-column label="编号" width="50" align="center" prop="productId">
            </el-table-column>
            <el-table-column prop="imgPath" label="商品图片" width="100" align="center">
              <template slot-scope="scope">
                <img slot="reference" :src="scope.row.imgPath" style="width: 55px; height: 55px" />
              </template>
              <!-- <div v-for="(item, index) in records" :key="index" class="imgPath">
            <img :src="item.imgPath" alt=""  />
          </div> -->
            </el-table-column>
            <el-table-column prop="productName" label="商品名称" width="width" align="center">
            </el-table-column>
            <el-table-column prop="productType" label="商品类型" width="100px" align="center">
            </el-table-column>
            <el-table-column prop="memberPrice||originalPrice||marketPrice||salePrice" label="价格" width="120"
              align="center" id="price">
              <template slot-scope="scope">
                <p id="price">
                  <span>市场{{ scope.row.marketPrice }}</span>
                  <span>成本{{ scope.row.originalPrice }}</span>
                  <span>销售{{ scope.row.salePrice }}</span>
                  <span>会员{{ scope.row.memberPrice }}</span>
                </p>
              </template>
            </el-table-column>
            <el-table-column prop="stockCount" label="库存" width="80" align="center">
            </el-table-column>
            <el-table-column prop="supplierName" label="供应商" width="70" align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="140" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="更新时间" width="140" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.updateTime }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ifpass" label="审核" width="50" align="center">
              <!-- <template slot-scope="{ row, $index }">
                <button :class="row.ifpass == '未审' ? 'redcolor' : 'bluecolor'" size="mini" id="shenhe"
                  @click="shenhe(row, $index)">
                  <span style="cursor:pointer;">{{ row.ifpass }}</span>
                </button>
              </template> -->
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="50">
            </el-table-column>
            <el-table-column label="操作" width="260">
              <!-- eslint-disable-next-line -->
              <template slot-scope="{ row, $index }">
                <!-- <el-button @click="editpic(row)" style="background:#6090EC;color:#fff" size="mini" id="btn">图片
                  </el-button> -->
                <el-button @click="rule(row)" style="background:#6090EC;color:#fff" size="mini">商品规格
                </el-button>
                <el-button style="background:#6090EC;color:#fff" size="mini" @click="deletct(row)">删除
                </el-button>
                <el-button @click="edit(row)" type="warning" size="mini">修改</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="block" style="margin-top: 15px">
            <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
      >
      </el-pagination> -->
            <el-pagination align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage" :page-sizes="[10, 15, 20]" :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </div>
        <!-- 新增 -->
        <div class="productadd-container-bottom" v-show="!showTable">
          <el-form ref="form" label-width="150px" :model="addes">
            <el-form-item label="商品名称">
              <el-input style="width:300px" placeholder="请输入商品名称" v-model="add.productName">
              </el-input>
            </el-form-item>
            <div class="gongying">
              <div class="shang">
                <el-form-item label="供应商">
                  <el-select placeholder="供应商" v-model="add.supplierId" @change="handler1" clearable>
                    <el-option :label="c2.supplierName" :value="c2.id" v-for="c2 in list1" :key="c2.id"></el-option>
                  </el-select>
                </el-form-item>
                <!-- <el-form-item label="展示区域">
                  <el-select :popper-append-to-body="false" clearable placeholder="展示区域" v-model="add.typeId"
                    @change="handler2($event)" class="select">
                    <el-option :label="c2.name" :value="c2.id" v-for="c2 in list3" :key="c2.id"></el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item label="商品单位">
                  <el-input v-model="add.unit" placeholder="请输入单位"></el-input>
                </el-form-item>
              </div>
              <div class="shang">
                <el-form-item label="商品属性">
                  <el-select placeholder="商品属性" v-model="add.propertyTypeId" @change="listfn" clearable>
                    <el-option :label="tm.title" :value="tm.id" v-for="tm in list4" :key="tm.id"></el-option>
                  </el-select>
                </el-form-item>
                <!-- 一级分类的数组 -->
                <el-form-item label="商品分类/展示区域">
                  <el-select placeholder="一级分类" v-model="add.categoryPid" @change="ccategoryPid" clearable>
                    <el-option :label="tm.name" :value="tm.id" v-for="tm in list3" :key="tm.id"></el-option>
                    <!-- classify -->
                  </el-select>
                </el-form-item>
                <!-- 二级分类的数组 -->
                <el-form-item>
                  <el-select placeholder="二级分类" v-model="add.categoryCid" @change="categoryCid" clearable>
                    <el-option :label="tm.name" :value="tm.id" v-for="tm in twoclass" :key="tm.id"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <el-form-item label="型号规格">
              <el-button style="background:#6090EC;color:#fff" icon="el-icon-plus" @click="addSaleAttr">添加型号规格
              </el-button>
              <el-table :data="add.mallProductSpec" size="mini" border style="width: 95%;margin-top:15px;"
                :header-cell-style="{
                  color: '#fff',
                  background: '#6090EC',
                  fontSize: '11px',
                  fontWeight: 'normal',
                  height: '50px'
                }">
                <el-table-column type="index" prop="productSpecId" label="编号" width="80px" align="center">
                </el-table-column>
                <el-table-column align="center" prop="specName" label="商品规格">
                  <!-- eslint-disable-next-line -->
                  <template slot-scope="scope">
                    <el-input ref="specName" v-model="scope.row.specName" placeholder="商品规格"></el-input>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="salePrice" label="销售" width="width">
                  <!-- eslint-disable-next-line -->
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.salePrice" placeholder="销售"></el-input>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="memberPrice" label="会员价" width="width">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.memberPrice" placeholder="会员价"></el-input>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="originalPrice" label="成本" width="width">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.originalPrice" placeholder="成本"></el-input>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="marketPrice" label="市场" width="width">
                  <!-- eslint-disable-next-line -->
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.marketPrice" placeholder="市场"></el-input>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="stockCount" label="库存" width="width">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.stockCount" placeholder="库存"></el-input>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="width">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="deletmallProductSpec(scope.row,scope.$index)">删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <el-form-item label="简介">
              <el-input type="textarea" rows="4" placeholder="请输入简介" v-model="add.introduce"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" rows="4" placeholder="备注" v-model="add.remarks"></el-input>
            </el-form-item>
            <el-form-item label="图片">

              <el-upload action="/file/fileMapping/uploadAvatarMall" list-type="picture-card"
                :on-success="handlePictureCardPreview" :on-remove="handleRemove" :file-list="documentVoListsa">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <div class="quilleditor">
              使用说明：
              <!-- <quill-editor v-model="str" ref="myQuillEditor" :value="quillContent" :options="editorOption"
                @change="onEditorChange"></quill-editor> -->
              <quill-editor v-model="str" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)">
              </quill-editor>
              <!--  @blur="onEditorBlur($event)"
                 @focus="onEditorFocus($event)"  @ready="onEditorReady($event)" -->
            </div>
            <div class="switch">
              审核<el-switch v-model="value1" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
                inactive-value="0">
              </el-switch>
              <!-- 支持自提<el-switch v-model="value2" active-value="1" inactive-value="0" active-color="#13ce66"
                   inactive-color="#ff4949">
              </el-switch> -->
              支持配送<el-switch v-model="value3" active-value="1" inactive-value="0" active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
              是否热卖<el-switch v-model="value4" active-value="1" inactive-value="0" active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </div>
            <div class="last-two">
              <span>排序 :</span>
              <el-input v-model.number="add.sort" placeholder="请输入排序编号" class="input" />
            </div>
            <el-form-item>
              <el-button style="background:#6090EC;color:#fff" @click="addOrUpdateSpu" class="green el-icon-folder">保存
              </el-button>
              <el-button @click="cancel" class="green el-icon-close">关闭</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>




    <el-dialog title="商品规格" :close-on-click-modal="false" :visible.sync="dialogFormVisible" width="60%">
      <el-table size="mini" :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }" :data="dataList.mallProductSpec" border>
        <el-table-column prop="productSpecId" label="规格编号" width="120"> </el-table-column>
        <el-table-column prop="specName" label="规格名称"> </el-table-column>
        <el-table-column prop="salePrice" label="销售单价" width="80"> </el-table-column>
        <el-table-column prop="originalPrice" label="成本价" width="80"> </el-table-column>
        <el-table-column prop="memberPrice" label="会员价" width="80"> </el-table-column>
        <el-table-column prop="marketPrice" label="市场价" width="80"> </el-table-column>
        <el-table-column prop="stockCount" label="库存" width="80"> </el-table-column>
        <el-table-column prop="sort" label="排序" width="80"> </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="rulevaluesave(scope.row)">积分规则</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div style="margin:20px 0 0 45%">
        <el-button type="primary" @click="dialogFormVisible=false">取消</el-button>
      </div>
    </el-dialog>
    <!--  -->
    <el-dialog title="积分规则" :close-on-click-modal="false" :visible.sync="Ruleintegration" width="40%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm" size="mini">
        <el-form-item label="积分抵扣值" prop="uirId">
          <el-input v-model="ruleForm.uirId"></el-input>
        </el-form-item>
        <el-form-item label="积分使用规则" prop="uirUseType">
          <el-select v-model="ruleForm.uirUseType" placeholder="积分使用规则">
          
            <el-option v-for="item in uirUseTypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="积分抵扣规则" v-if="ruleForm.uirUseType==1 || ruleForm.uirUseType==4">
          <el-input v-model="ruleForm.uirPoints"></el-input>
        </el-form-item>
        <el-form-item label="积分抵扣百分比" v-if="ruleForm.uirUseType==2">
          <el-input v-model="ruleForm.uirPointsDiscount"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button type="primary" @click="Ruleintegration=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {
    type
  } from '../../common/format';
  const toolbarOptions = [
    ["bold", "italic", "underline", "strike"],
    [{
      header: 1
    }, {
      header: 2
    }],
    [{
      list: "ordered"
    }, {
      list: "bullet"
    }],
    [{
      indent: "-1"
    }, {
      indent: "+1"
    }],
    [{
      direction: "rtl"
    }],
    [{
      color: []
    }, {
      background: []
    }],
    [{
      align: []
    }],
    ["image"],
  ];

  export default {
    props: {
      quillContent: {
        type: String,
        default: "",
      },
    },
    data() {
      const _this = this;
      return {
        is:false,
        uirUseTypeList:[
          {
            label:"积分没有使用上线",
            value:1
          },
          {
            label:"积分使用比例",
            value:2
          },
          {
            label:"不允许使用积分",
            value:3
          },
          {
            label:"积分上限",
            value:4
          },
        ],
        productSpecId: null,
        rules: {
          uirId: [{
            required: true,
            message: '请输入积分抵扣值',
            trigger: 'blur'
          }, ],
          uirUseType: [{
            required: true,
            message: '请选择积分使用规则',
            trigger: 'change'
          }, ],
        },
        ruleForm: {
          uirId: null,
          uirUseType: null,
          uirPoints: null,
          uirPointsDiscount: null,
          productId: null,
          productSpecId: null,
        },
        Ruleintegration: false,
        dataList: {},
        fenlei: '', //商品分类
        imgmore: "",
        pictureUrl: "",
        uploadFileData: null,
        editorOption: {
          modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
              ['blockquote', 'code-block'], // 引用  代码块
              [{
                header: 1
              }, {
                header: 2
              }], // 1、2 级标题
              [{
                list: 'ordered'
              }, {
                list: 'bullet'
              }], // 有序、无序列表
              [{
                script: 'sub'
              }, {
                script: 'super'
              }], // 上标/下标
              [{
                indent: '-1'
              }, {
                indent: '+1'
              }], // 缩进
              [{
                direction: 'rtl'
              }], // 文本方向
              [{
                size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36']
              }], // 字体大小
              [{
                header: [1, 2, 3, 4, 5, 6]
              }], // 标题
              [{
                color: []
              }, {
                background: []
              }], // 字体颜色、字体背景颜色
              // [{ font: ['songti'] }], // 字体种类
              [{
                align: []
              }], // 对齐方式
              ['clean'], // 清除文本格式
              ['image', 'video'] // 链接、图片、视频
            ]
          },
          placeholder: '请输入正文'
        },
        //折扣规则
        rulevalue: null,
        // 百分比
        rulevalueNum: null,
        typearrlist: [{
            id: 0,
            title: "积分没有上限"
          },
          {
            id: 1,
            title: "积分使用比例"
          },
          {
            id: 2,
            title: "不允许使用积分"
          },
        ],
        // 图片回显
        documentVoListsa: [

        ],
        dialogTableVisible: false, //弹框的设置
        visible: true,
        pictureUrl: "",
        active: 0,

        logoUrl: "",
        //  uploadUrl: "/system/editfile/upload",//文件上传接口
        currentPage: 1, // 当前页码
        pageSize: 10, // 每页的数据条数
        //代表的分页器第几页
        page: 1,

        //当前页数展示数据条数
        limit: 3,
        //总共数据条数
        total: 0,
        allProductSpec: [],
        arrList: [],
        addshuxing: null, //商品属性
        businesstype: null, //商品类型
        paixu: null, //排序
        typexing: 0, //商品类型
        addes: {},
        list: [{
            id: 1,
            rid: 123
          },
          {
            id: 2,
            rid: 456
          },
          {
            id: 3,
            rid: 7777
          },
        ],
        current: "",
        // 商品详情二级分类
        twoclass: [],

        expected: "供应商供应商供应商",
        as: "",
        // value1:
        value1: null,
        value2: null,
        value3: null,
        value4: 0,

        // 都是v-model绑定值
        gongying: "", //供应商
        business: "", //带参掉供应商列表
        commoditytype: "", //商品类型
        category: "", //商品分类
        property: "", //属性绑定值
        inputguanone: "", //关键字搜索 商品名称

        showTable: true, //控制两个盒子的显示与隐藏

        // 第一个div信息
        checked: false, // 收集已售罄信息
        // 供应商的数据
        list1: [],
        //商品类型的数据
        list2: [],
        //商品分类的数据
        list3: [],
        supplier: [], //供应商商品

        //商品属性的数据
        list4: [{
            id: 0,
            title: "实物",
            select: 1,
          },
          {
            id: 1,
            title: "活动码",
            select: 2,
          },
          {
            id: 2,
            title: "会员卡",
            select: 3,
          },
        ],
        //审核状态的数据
        list5: [{
            id: 0,
            title: "未审",
          },
          {
            id: 1,
            title: "已审",
          },
          {
            id: 2,
            title: "全部",
          },
        ],
        //收集商品展示的数据
        cForm: {},
        //控制三级联动的可操作性

        //table表格的数据

        total: 0, //分页器一共需要展示数据的条数
        //控制对话框的显示与隐藏
        dialogTableVisible: false,
        spu: {},
        // 下面的div属性
        as: [],
        // 审核的按钮
        // 富问本绑定的内容
        supplier: [], //供应商数组
        caterolytype: [], //商品类型数组
        units: [], //商品单位数组
        attr: [], //商品属性
        classify: [], //商品分类
        twoclassify: [], //二级分类
        attrIdAndAttrName: "", //收集未选择的销售属性的id-----
        //   添加数据的变量
        add: {
          spuSaleAttrList: [], //添加表格数据
          gyarr: "",
          classify: "",
          mallProductSpec: [],
          tableData: [], //表格的数组 假数据
          units: "",
          productName: "", //商品名称
          introduce: "", //简介
          units: "", //单位
          inputguan: null, //排序编号
          useIntro: "",
          shuxing: 0,
        },

        supplierdetail: [], //供应商数据
        listvalue: "", //编辑后的商品属性
        item1: null,
        item2: null,
        item3: null,
        item4: null,
        item5: null,
        item6: null,
        mallProductSpec: [],
        tip: null,

        result: null,
        dialogImageUrl: "",
        imgPiathpic: "",
        dialogFormVisible: false,
        str: null,
        json_fields: {
          供应商名称: "supplierName",
          展示区域: "typeId",
          商品属性: "productType",
          商品名称: "productName",
          审核状态: "ifpass",
          市场价: "marketPrice",
          销售单价: "salePrice",
          会员价: "memberPrice",
          成本价: "originalPrice",
          库存: "stockCount",
          创建时间: "createTime",
        },
        records: [],
        productImgList: []
      };
    },
    mounted() {
      // 后台商品列表数据
      this.getproductlist();
      //后台的供应商列表数据 单独接口
      this.getsupplier();
      // 后台的商品类型 单独接口
      this.getcommodity();
      // 后台的商品类型
      this.getclassification();
      // this.updateMallProduct();
      // 分类匹配id




      this.getmallHomepage();
    },
    created() {},
    _methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if( this.is){
              this.getlinkedit()
            }else{
              this.getlinkadd()
            }
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 点击积分规则
      rule(row) {
        console.log(row)

        this.$axios
          .getproductBackstageDetails({
            productId: row.productId
          }).then((res) => {
            if (res.code == 200) {
              this.dataList = res.data
              console.log(this.dataList)
            }
          })
        // 积分规则他弹窗
        this.dialogFormVisible = true;
      },
      // 积分规则保存按钮
      rulevaluesave(row) {
        this.productSpecId = row.productSpecId
        this.ruleForm.uirId = null,
          this.ruleForm.uirUseType = null,
          this.ruleForm.uirPoints = null,
          this.ruleForm.uirPointsDiscount = null,
          console.log(row)
        this.Ruleintegration = true
        this.$axios.getqueryUseintegralruleLinkByProductId({
          productId: this.dataList.productId,
          productSpecId: this.productSpecId
        }).then((res) => {
          if (res.code == 200 && res.data) {
            this.ruleForm = res.data
            this.is=true
          }
        })
      },

      getlinkadd() {
        this.$axios.getlinkadd({
          uirId: Number(this.ruleForm.uirId),
          uirUseType: Number(this.ruleForm.uirUseType),
          uirPoints:  Number(this.ruleForm.uirPoints),
          uirPointsDiscount:  Number(this.ruleForm.uirPointsDiscount),
          productId:  Number(this.dataList.productId),
          productSpecId:  Number(this.productSpecId)
        }).then((res) => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: '新增成功',
              type: 'success'
            });
            this.Ruleintegration = false
          }
        })
      },

      getlinkedit(){
        this.$axios.getlinkedit({
          linkId: Number(this.ruleForm.linkId),
          uirId:  Number(this.ruleForm.uirId),
          uirUseType:  Number(this.ruleForm.uirUseType),
          uirPoints:  Number(this.ruleForm.uirPoints),
          uirPointsDiscount:  Number(this.ruleForm.uirPointsDiscount),
          productId:  Number(this.dataList.productId),
          productSpecId:  Number(this.productSpecId)
        }).then((res) => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.Ruleintegration = false
          }
        })
      },











      // 图片上传
      handlePictureCardPreview(file, filelist) {
        this.productImgList.push(file[0])
        console.log(this.productImgList)
      },
      // 删除图片
      handleRemove(file, filelist) {
        console.log(file, filelist);
        for (let i = 0; i < this.productImgList.length; i++) {
          if (this.productImgList[i] == file.response[0])

            this.productImgList.splice(i, 1)
        }
        console.log(this.productImgList)
      },

      onEditorChange(e) {
        console.log(e.html);

      },
      shenhe(row, index) {
        console.log(row, index);
        this.$axios.geteditMallProduct({
          productId: row.productId,
          ifpass: 1
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "操作成功",
            });
            this.getproductlist();
          }
        });
      },
      // 积分规则的点击事件
      rowClick(index, row) {
        this.active = index;
        console.log(index);
        // 活动类型 拿到数据中每次点击的索引 去判断 如果拿到的第一个索引等于0 就给某个变量赋值 将变量传过去
        if (index == "0") {
          this.typeid = 10;
        } else if (index == "2") {
          this.typeid = 20;
        } else if (index == "3") {
          this.typeid = 30;
        }
      },

      addupload() {
        document.querySelector(".imgs-img input").click();
      },

      // 表格里的拿到图片
      editpic(row) {
        console.log(row);
        this.visible = false;
        this.imgPiathpic = row.imgPath;
      },

      reset() {
        this.gongying = null;
        this.commoditytype = null;
        this.category = null;
        this.property = null;
        this.cForm.status = null;
        this.inputguanone = null;
        this.checked = null;



        this.business = null;
        this.businesstype = null;
        this.fenlei = null;
        this.shangproperty = null;
        this.shenstate = null;
        this.inputguanon = null;
        this.checked = null;
        this.getproductlist();

      },
      //点击查询 掉接口
      query() {
        console.log("查询数据了");
        this.getproductlist();
      },
      // 后台商品列表
      getproductlist() {
        localStorage.setItem("isToken", true);
        // console.log("111");
        this.$axios
          .getproductlist({
            id: this.business,
            categoryPid: this.businesstype,
            // categoryPid: this.fenlei,
            propertyTypeId: this.shangproperty,
            ifpass: this.shenstate,
            productName: this.inputguanone,
            sellOut: this.checked,
          })
          .then((res) => {
            this.records = res.data;
            console.log(res);
            this.total = res.total;
            console.log(this.total);
            // if(res.code=='200'){
            //   this.$message({
            //     type:'success',
            //     message:"查询成功"
            //   })
            // }
          });

        
      },

      // 第一个页面的添加按钮
      showdiag() {
        this.showTable = false; //点击添加按钮 两者取反
        this.tip = true; //给添加按钮标记
        // 每次点击添加按钮 第二个页面上绑定的元素清空
      },

      // 一级分类的数组
      ccategoryPid() {
        console.log(111)
        console.log(this.add.categoryPid)
        for (let i = 0; i < this.list3.length; i++) {
          if (this.list3[i].id == this.add.categoryPid) {
            this.twoclass = this.list3[i].mallCategoryVoList
          }
        }

      },
      // 二级分类
      categoryCid(item) {
        // console.log(item);
      },
      // 点击售事件
      selling(a) {
        console.log(a);
      },
      //删除事件
      deletct(row) {
        console.log(row.productId);
        this.$confirm(`你确定删除吗`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true,
          })
          .then(() => {
            this.deleteMallProduct(row.productId);
          })
          .catch(() => {
            this.$message({
              message: '已取消删除',
              type: 'warning'
            });
          });
      },
      deleteMallProduct(id) {
        this.$axios.deleteMallProduct({
          productId: id
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getproductlist(); //查询数据
          }

          // return res
        });
      },

      // 商城首页
      getmallHomepage() {
        this.$axios.getmallHomepage({}).then((res) => {
          if (res.code == "200") {
            console.log(res);
            // this.hotMallProduct = res.data.hotMallProduct;
            // this.exchangeMallProduct = res.data.exchangeMallProduct;
            // this.newMallProduct = res.data.newMallProduct;
          }
        });
      },

      // 第二个div 关闭按钮
      cancel() {
        this.showTable = true;
        this.add = "";
        this.str = "";
        this.value1 = "";
        this.value2 = "";
        this.value3 = "";
        this.value4 = "";
      },
      // 添加型号按钮
      addSaleAttr() {
        // debugger
        this.add.mallProductSpec.push({});
        // this.$nextTick(() => {
        //   // this.$refs[this.add.mallProductSpec.length - 1].focus();
        // });
      },
      deletmallProductSpec(row, index) {
        console.log(row, index)
        this.add.mallProductSpec.splice(index, 1)
      },

      // 第二个div 保存按钮
      addOrUpdateSpu() {
        if (this.tip == true) {
          if (this.add.productName !== "") {
            this.addMallProduct(); // tip true 是true掉添加
            this.showTable = true;
          } else {
            this.$message({
              type: "success",
              message: "输入名称不能为空"
            });
          }
        } else {
          this.updateMallProduct(); // 修改后台的商品详情
          this.showTable = true;
        }
        console.log('要掉查询按钮了');
        this.business = null;
        this.businesstype = null;
        this.fenlei = null;
        this.shangproperty = null;
        this.shenstate = null;
        this.inputguanon = null;
        this.checked = false;
        // this.getproductlist()
        // if (this.tip == true) {
        // 保存之前如果添加的东西都填上了 直接掉用添加接口
        //     this.$message({
        //       type: "success",
        //       message: "输入不能为空",
        //     });
        //     this.showTable = !this.showTable;
        //   } else {
        //   }
        // } else {
        //   console.log("222");
        // }
        this.add.productName = "";
        this.add.supplierId = "";
        this.commoditytype = null;
        this.add.unit = "";
        this.add.categoryPid = "";
        this.add.categoryCid = "";
        this.add.sort = "",
          this.paixu = null;
        this.addshuxing = "";
        this.value1 = "";
        this.value2 = "";
        this.value3 = "";
        this.value4 = "";
        this.add.introduce = "";
        this.add.remarks = "";
        this.str = null;
        this.add.mallProductSpec = [];
      },
      // 后台添加的接口
      addMallProduct() {
        localStorage.setItem("isToken", true);
        this.$axios
          .addMallProduct({
            productName: this.add.productName,
            propertyTypeId: this.add.propertyTypeId,
            typeId: this.add.typeId,
            unit: this.add.unit,
            categoryPid: this.add.categoryPid,
            categoryCid: this.add.categoryCid,

            introduce: this.add.introduce,
            useIntro: this.str,
            ifpass: this.value1,
            ifpickup: this.value2,
            ifdistribution: this.value3,
            sort: this.add.sort,
            mallProductSpec: this.add.mallProductSpec,
            imgPaths: this.productImgList
          })
          .then((res) => {
            // conso.log(res);
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "添加商品成功",
              });
            }
            // this.getproductlist();
          });
        
      },

      // 修改后台的商品详情
      updateMallProduct() {
        this.$axios
          .updateMallProduct({
            productId: this.productId,
            productName: this.add.productName,
            specName: "",
            propertyTypeId: this.add.propertyTypeId,
            introduce: this.add.introduce,
            ifpass: this.value1,
            ifpickup: this.value2,
            ifdistribution: this.value3,
            hot: this.value4,
            sort: this.add.sort,
            useIntro: this.str,
            mallProductSpec: this.add.mallProductSpec,
          })
          .then((res) => {
            if (res.code == 200) {
              this.getproductlist();

              this.$message({
                type: "success",
                message: "修改成功",
              });
            }
          });
        

      },
      // 当商品类型里面的值发生变化时的函数
      caterolytypes(value) {
        console.log(value);
        this.caterolytypevalue = value;
      },
      // 当商品属性里面的值发生变化时的函数
      listfn(value) {
        this.listvalue = value; //将改变后的值赋值给listvalue =商品属性
        console.log(this.listvalue);
      },

      // // 详情接口
      edit(row) {
        this.tip = false;
        this.showTable = false;
        this.productId = row.productId;
        localStorage.setItem("isToken", true);
        this.$axios
          .getproductBackstageDetails({
            productId: this.productId,
          })
          .then((res) => {
            this.add = res.data;

            // this.add.shuxing = this.list4[res.data.propertyTypeId].title; //绑定商品属性值
            this.value1 = this.add.ifpass;
            this.value2 = this.add.ifpickup;
            this.value3 = this.add.ifdistribution;
            this.value4 = this.add.hot;
            this.str = this.add.useIntro; //使用说明
            // this.getsupplier(res.data.supplierId); //供应商
            // this.getclassification(res.data.categoryPid); //商品分类
            let a = {
              url: "",
              type: ""
            }
            for (let i = 0; i < res.data.imgPaths.length; i++) {
              // this.documentVoListsa[i].url= res.data.imgPaths[i]
              //  this.documentVoListsa[i].type = ''
              a.url = res.data.imgPaths[i]
              a.type = ''
              this.documentVoListsa.push(a)
            }
            console.log(this.add.categoryPid)
            for (let i = 0; i < this.list3.length; i++) {
              if (this.list3[i].id == this.add.categoryPid) {
                this.twoclass = this.list3[i].mallCategoryVoList
              }
            }
          });
        
      },
      // 供应商调取数据的方法
      handler1(row) {
        this.business = row; //拿到供应商编号
      },
      //  商品类型的事件
      handler2(row) {
        console.log(row);
        this.businesstype = row;
      },
      //商品分类的事件回调
      handler3(row) {
        console.log(row);
        this.fenlei = row;
      },
      //商品属性的事件回调
      handler4(row) {
        this.shangproperty = row;
      },
      //审核状态的事件回调
      handler5(row) {
        this.shenstate = row;
        console.log(this.shenstate);
      },

      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.query();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        // debugger;
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.getproductlist();
      },

      //供应商列表
      getsupplier(id) {
        // console.log(id);
        localStorage.setItem("isToken", true);
        this.$axios.getsupplier({}).then((res) => {
          let arr = JSON.parse(JSON.stringify(res.data));
          arr.forEach((item) => {
            item.id = item.id * 1;
          });
          this.list1 = arr;
        });
        
      },
      //商品类型
      getcommodity() {
        localStorage.setItem("isToken", true);
        this.$axios.getcommodity({}).then((res) => {
          this.list2 = res.data;
        });
        
      },
      // 商品分类
      getclassification(ids) {
        console.log(ids);
        // debugger
        localStorage.setItem("isToken", true);
        this.$axios.getclassification({}).then((res) => {
          this.list3 = res.data;

        });
        
      },

      cunpic() {
        this.visible = true;
      },
      cancelpic() {
        this.visible = true;
      },
    },
    get methods() {
      return this._methods;
    },
    set methods(value) {
      this._methods = value;
    },
  };
</script>


<style scope>
  .upload-box {
    display: flex;
  }

  .tupian {
    margin: 50px;
    line-height: 80px;
  }

  .tupian img {
    width: 188px;
    height: 151px;
  }

  .visible {
    display: block;
  }

  .productOrder-container {
    padding: 25px;
  }

  .relicMapSearch {
    display: flex;
  }

  .select {
    width: 120px;
    height: 50px;
    min-height: 50px;
    position: relative;
  }

  .left-select {
    width: 660px;
    height: 80px;
  }

  .right-select {
    width: 580px;
    height: 80px;
  }

  .input {
    width: 200px;
  }

  .shou {
    padding: 0px 10px;
  }

  .same {
    width: 90px;
    background-color: #6090EC;
  }

  /* 下面的div */
  .switch {
    width: 80%;
    margin-left: 50px;
    margin-top: 70px;
    height: 50px;
    position: relative;
  }

  .switch .el-switch {
    padding: 0px 20px;
  }

  .last-two {
    display: inline-flex;
    margin-bottom: 20px;
  }

  .last-two span {
    width: 80px;
    height: 20px;
    margin-left: 20px;
    line-height: 20px;
    margin-top: 10px;
  }

  /* 供应商6个布局 */
  .gongying .shang {
    width: 1206px;
    display: inline-flex;
  }

  .gongying .shang .el-select {
    width: 220px;
    padding: 0px 30px;
  }

  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .quilleditor {
    width: 100%;
    display: flex;
    height: 300px;
    position: relative;
  }

  .quilleditor .quill-editor {
    width: 80%;
  }

  .imgPath img {
    width: 100%;
    height: 50px;
  }

  .activitytypeone {
    display: flex;
  }

  .attrul {
    display: flex;
  }

  .attrul li {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 2px;
    margin-left: 15px;
  }

  .attrul li span:nth-of-type(1) {
    width: 100%;
    color: #fff;
    display: inline-block;
    height: 40px;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    background-color: #c9c9c9;
  }

  .attrul li i:nth-of-type(1) {
    width: 50px;
    text-indent: 0.2rem;
    line-height: 40px;
    color: #fff;
  }

  .act {
    color: #5fb878 !important;
  }

  .activeClass {
    display: inline-block;
    width: 100%;
    height: 40px;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: #5fb878 !important;
  }

  .leixing {
    margin-top: 10px;
  }

  .rulezhe {
    margin-top: 20px;
  }

  .rulezhe span {
    display: inline-block;
    display: flex;
    margin-top: 20px;
    flex: 1;
  }

  .rulezhe i {
    display: inline-block;
    width: 80px;
    font-style: normal;
  }

  #el-input {
    width: 38%;
  }

  #one {
    color: red;
    margin-left: 10px;
    margin-top: 8px;
  }

  #stars {
    color: red;
  }

  #stars {
    margin-left: 10px;
  }

  #price span {
    font-size: 12px;
    color: #fff;
    width: 60%;
    height: 20px;
    padding-left: 2px;
  }

  #price span:nth-of-type(1) {
    display: inline-block;

    background-color: #ff5722;
  }

  #price span:nth-of-type(2) {
    display: inline-block;

    background-color: #009688;
  }

  #price span:nth-of-type(3) {
    display: inline-block;

    background-color: #1e9fff;
  }

  #price span:nth-of-type(4) {
    display: inline-block;
    background-color: #ffb800;
  }


  #button #btn {
    margin-bottom: 10px;
  }

  #shenhe {
    width: 30px;
    font-size: 10px;
    background-color: #6090EC;
    color: #fff;
    border: 0;
  }

  .same {
    background-color: #6090EC;
    color: #ffff;
  }

  .blueBtn {
    font-size: 14px;
    float: right;
    width: 100px;
    height: 26px;
    color: #ffff;
    line-height: 26px;
    text-align: center;
    background-color: #6090EC;
  }

  .el-button {
    margin-right: 7px;
  }

  /* .el-cha { */
  /* border: 1px solid red; */
  /* } */

  .redcolor {
    background-color: #ff5722 !important;
  }

  .bluecolor {
    background-color: #6090EC;
  }
</style>